﻿<Page
    x:Name="pageRoot"
    x:Class="Microsoft.PlayerFramework.Samples.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Microsoft.PlayerFramework.Samples"
    xmlns:data="using:Microsoft.PlayerFramework.Samples.Data"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Splitter.DisplayMode" Value="Inline"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Splitter.DisplayMode" Value="Overlay"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <SplitView x:Name="Splitter" IsPaneOpen="True" Grid.ColumnSpan="2">
            <SplitView.Pane>
                <Grid Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <StackPanel Margin="50,0,0,0">
                        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal">
                            <Image Source="Assets/SmallLogo.png" Width="18" Height="18" Margin="0,15,0,0" />
                            <TextBlock x:Name="Header" Text="Microsoft Player Framework" Style="{StaticResource TagLineTextStyle}" Margin="10,15,0,0" />
                        </StackPanel>
                        <TextBlock x:Name="SampleTitle" Text="Sample Title Here" Style="{StaticResource SampleHeaderTextStyle}" TextWrapping="Wrap" RelativePanel.Below="HeaderPanel" Margin="0,10,0,0"/>
                    </StackPanel>
                    <ListBox x:Name="ScenarioControl" Grid.Row="1" SelectionChanged="ScenarioControl_SelectionChanged" SelectionMode="Single" HorizontalAlignment="Left" Style="{StaticResource ScenarioListBoxStyle}" VerticalAlignment="Top" RelativePanel.Below="SampleTitle" Margin="0,10,0,0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="{Binding Title}" Style="{StaticResource ListItemTextStyle}"/>
                                    <TextBlock Text="{Binding Description}" Style="{StaticResource ListItemDescriptionStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </SplitView.Pane>
            <Frame x:Name="ScenarioFrame" Padding="42,10,42,10"/>
        </SplitView>
        <Border>
            <ToggleButton Style="{StaticResource SymbolButton}" Click="Button_Click" VerticalAlignment="Top" Foreground="{ThemeResource ApplicationForegroundThemeBrush}">
                <ToggleButton.Content>
                    <FontIcon x:Name="Hamburger" FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" Margin="0,10,0,0"/>
                </ToggleButton.Content>
            </ToggleButton>
        </Border>
    </Grid>
</Page>
